<template>
  <a-modal
    title="查看学校"
    :width="820"
    :visible="visible"
    :confirmLoading="loadings"
    @ok="() => { $emit('ok') }"
    @cancel="() => { $emit('cancel') }"
    footer
  >
    <a-spin :spinning="loadings">
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
          <a-row :gutter="20">
            <!-- <a-col :md="8" :sm="24">
              <a-form-item label="查找学校名称">
                <a-input v-model="queryParam.name" placeholder=""/>
              </a-form-item>
            </a-col> -->
            <!-- <a-col :md="10" :sm="24">
              <a-form-item label="查找状态">
                <a-select v-model="queryParam.status" placeholder="请选择">
                  <a-select-option value="1">未完成</a-select-option>
                  <a-select-option value="2">已完成</a-select-option>
                </a-select>
              </a-form-item>
            </a-col> -->
            <!-- <a-col :md="6" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="search">查询</a-button>
                <a-button style="margin-left: 8px" @click="reset">重置</a-button>
              </span>
            </a-col> -->
          </a-row>
        </a-form>
        </div>

      <a-table :columns="columns" :dataSource="loadData" :rowKey="(record,index)=>{return index}" :pagination="pagination" @change="TableChange">
          <a slot="name" slot-scope="text">{{ text }}</a>
                  <span slot="action" slot-scope="text, record">
          <template>
            <a @click="handleJump(record)">查看</a>
          </template>
        </span>
        </a-table>
    </a-spin>
    <!-- <a-form>{{loadData[0].nickname}}</a-form> -->
  </a-modal>
</template>
<script>
import { GetSchoolUser } from '../../../../api/school'

const columns = [
  // {
  //   title: 'id',
  //   dataIndex: 'id',
  //   scopedSlots: { customRender: 'id' }
  // },
  {
    title: '学校名称',
    dataIndex: 'name',
  },
  {
    title: '联系人',
    dataIndex: 'contract'
  },
  {
    title: '电话',
    dataIndex: 'phone',
  },
  {
    title: '区',
    dataIndex: 'area',
  },
  {
    title: '详细地址',
    dataIndex: 'address',
  },
  {
    title: '任务状态',
    dataIndex: 'statusname'
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '120px',
    scopedSlots: { customRender: 'action' }
  }
]
// 表单字段
const fields = ['id']
const loadData = []
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data () {
    this.columns = columns
    this.loadData = loadData
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      }
    }
    return {
      loadings: this.loading,
      // 查询参数
      queryParam: {
        status:'',
        name:''
      },
      pagination:{
        defaultPageSize:5,
        showTotal: total => `共 ${total} 条数据`,
        showSizeChanger:false,
        pageSizeOptions: ['5', '10', '15', '20'],
        onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize
        },
      form: this.$form.createForm(this),
      loadData: loadData,
      id: 0,
      froms: {},
      schoolId: 0
      // ids:0,
    }
  },
  created () {
    // 防止表单未注册
    // fields.forEach(v => this.form.getFieldDecorator(v))
    this.$watch('model', () => {
      this.id = this.model.id
      this.forms = this.model.forms
      console.log('--------------------model--------------', this.model)
      console.log('--------------------this.id--------------', this.id)
      console.log('--------------------this.forms--------------', this.forms)
      this.getdata();
      // this.model && this.form.setFieldsValue(pick(this.model, fields))
    })
  },
  // updated(){
  //   if( this.id != this.ids ){
  //     this.ids = this.id;
  //     this.getdata();
  //   }
  // },
  methods:{
    handleJump(record){
      this.schoolId = record.school_id
      const value = {
        id: this.id,
        forms: this.forms,
        schoolId: this.schoolId
      }
      this.$router.push({
        name: 'taskdataIndex',
        path: '/task/taskdata/index',
        query: {data: JSON.stringify(value)}
      })
      console.log('----------------this.schoolId-----------', value)
    },
    reset () {
      this.loadings = true
      this.queryParam = {}
      GetSchoolUser({ task_id:this.id}).then(res => {
        this.loadings = false
        this.loadData = res.data.data
      })
    },
    TableChange() {},
    search() {
      this.loadings = true
      let resList = JSON.parse(JSON.stringify(this.queryParam))
      resList.task_id = this.id
      GetSchoolUser(resList).then(res=> {
        this.loadings = false
        this.loadData = res.data.data
      })
    },
    getdata(){
        this.loadings = true
        GetSchoolUser({ task_id: this.id}).then(res => {
        console.log('-----------------res--------------', res)
          this.loadings = false
          this.loadData = res.data
      })
    }
    
  },
  // watch: {
  //   model: function (value) {
  //     const result = value
  //     const datas = JSON.parse(JSON.stringify(result))
  //     const datas1 = datas.data.data
  //     this.loadData = datas1
  //     console.log('-------edit------------', datas1)
  //   }
  // }
}
</script>
